<!-- index.vue -->
<template>
  <div class="app">
    <!-- 复用 Banner 组件，通过具名插槽自定义 Banner 图 -->
    <Banner>
      <template v-slot:banner-img>
        <img src="./assets/banner.jpg" alt="数码商城 banner" />
      </template>
    </Banner>

    <!-- 复用 TabContainer 组件，传递标签列表，并通过作用域插槽渲染对应商品列表 -->
    <TabContainer :tabs="['手机专区', '笔记本专区', '配件专区']">
      <template v-slot:default="slotProps">
        <ProductList :products="allProducts" :category="slotProps.currentTab" />
      </template>
    </TabContainer>
  </div>
</template>

<script>
import Banner from './components/Banner.vue';
import TabContainer from './TabContainer.vue';
import ProductList from './ProductList.vue';

export default {
  name: 'Index',
  components: { Banner, TabContainer, ProductList },
  data() {
    return {
      // 复用任务1的菜单（商品）数据
      allProducts: [
        { id: 1, name: '某某手机', price: 3999, category: '手机专区', img: './assets/phone.jpg' },
        { id: 2, name: '某某笔记本', price: 5999, category: '笔记本专区', img: './assets/laptop.jpg' },
        { id: 3, name: '某某耳机', price: 299, category: '配件专区', img: './assets/earphone.jpg' },
        // 更多商品...
      ]
    }
  }
}
</script>

<style scoped>
.app {
  max-width: 1200px;
  margin: 0 auto;
}
</style>